<script setup lang="ts">
const props = defineProps({
  cardItem: {
    type: Object,
    default: () => {},
  },
  cardIndex: {
    type: Number,
    default: 0,
  },
  title: {
    type: String,
    default: "",
  },
});
</script>

<template>
  <view class="card-box crosswise">
    <image
      class="rank-bg"
      src="@/static/images/collect_yi_big.png"
      v-if="cardIndex == 0"
    />
    <image
      class="rank-bg"
      src="@/static/images/collect_er_big.png"
      v-if="cardIndex == 1"
    />
    <image
      class="rank-bg"
      src="@/static/images/collect_san_big.png"
      v-if="cardIndex == 2"
    />

    <view class="info-box crosswise">
      <view class="info-box-left">
        <view class="ranking">
          <image src="@/static/images/collect_yi.png" v-if="cardIndex == 0" />
          <image src="@/static/images/collect_er.png" v-if="cardIndex == 1" />
          <image src="@/static/images/collect_san.png" v-if="cardIndex == 2" />
        </view>
        <image
          :src="cardItem.headSculpture"
          class="info-img"
          v-if="cardItem.headSculpture"
        />
        <!-- <image src="@/static/images/bg.png" class="info-img" /> -->
        <view class="rank-text" v-if="cardIndex > 2"
          >NO.{{ cardIndex + 1 }}</view
        >
      </view>
      <view class="info-menu">
        <view class="head-box crosswise-sp">
          <text class="head-name" v-if="cardItem.userName || cardItem.shopVip">
            <text v-if="cardItem.userName">{{ cardItem.userName }}</text>
            <text class="grade" v-if="cardItem.shopVip"
              >(LV{{ cardItem.shopVip }})</text
            >
          </text>
          <text class="head-market" v-if="title == '销售榜'"
            >累计销售{{ cardItem.sl }}件</text
          >
          <text class="head-market" v-else>{{ cardItem.sl }}人关注</text>
        </view>
        <view class="describe" v-if="cardItem.address"
          >所在地区：{{ cardItem.address }}</view
        >
        <view class="describe" v-if="cardItem.personalProfile"
          >主营业务：{{ cardItem.personalProfile }}</view
        >
      </view>
    </view>
  </view>
</template>

<style lang="scss">
//
.card-box {
  position: relative;
  margin-bottom: 24rpx;
  padding: 30rpx 30rpx 30rpx 34rpx;
  border-radius: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);

  .rank-bg {
    position: absolute;
    top: 8rpx;
    right: 0;
    width: 188rpx;
    height: 188rpx;
  }

  .ranking {
    position: absolute;
    top: -40rpx;
    left: -20rpx;
    transform: rotate(-30deg);
    width: 60rpx;
    height: 60rpx;

    image,
    .rank-text {
      width: 60rpx;
      height: 60rpx;
    }

    .rank-text {
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(190, 190, 190, 1);
      font-size: 40rpx;
    }
  }

  .info-box {
    flex: 1;

    .info-box-left {
      position: relative;
    }

    .rank-text {
      color: rgba(154, 154, 154, 1);
      font-size: 28rpx;
      font-style: italic;
    }

    .info-img {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }

    .info-menu {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;

      margin-left: 20rpx;

      .head-box {
        width: 100%;

        .head-img {
          width: 34rpx;
          height: 34rpx;
          margin-right: 10rpx;
          border-radius: 50%;
        }

        .head-name {
          color: rgba(79, 79, 79, 1);
          font-size: 28rpx;

          .grade {
            margin-left: 4rpx;
            color: rgba(195, 62, 41, 1);
          }
        }

        .head-market {
          color: rgba(190, 190, 190, 1);
          font-size: 24rpx;
        }
      }

      .describe {
        margin: 4rpx 0;
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
      }
    }
  }
}
</style>
